<template>
	<view class="default-box mb-3" @click="navToUser">
		<view class="user-main mb-2">
			<view class="user-avatar" >
				<image v-if="userInfo.avatar" :src="userInfo.avatar" />
				<text v-else class="cuIcon-people default-icon"></text>
			</view>
			<view class="user-info">
				<view class="user-name huge-text text-halfbold">
					{{ userInfo.username }}
				</view>
				<view class="user-contact middle-text text-gray">
					{{ userInfo.phone }}
				</view>
			</view>
		</view>
		
		<view v-if="userInfo.role === 1" class="large-text user-content">
			<text class="cuIcon-tag mr-2"></text>
			<text>{{ userInfo.position }}</text>
		</view>
		<view v-if="userInfo.role === 2" class="large-text user-content">
			<text class="cuIcon-read mr-2"></text>
			<text>{{ userInfo.position }}</text>
		</view>
		
		
	</view>
	
	
	<view style="margin-bottom: 280rpx;" v-if="userInfo.role === 2">
		<OptionMenu
			:icon="mission.icon"
			:title="mission.title"
			:content="mission.content"
			:page="mission.page"
		/>
	</view>
	<view class="mission-box theme-shadow" style="margin-bottom: 280rpx;" v-else>
		<view class="title-row mb-2" @click="navToMission(6)">
			<view class="title">我的任务</view>
			<text class="cuIcon-right"></text>
		</view>
		
		<view class="cu-list grid col-4 no-border">
			<view class="cu-item grid-menu" v-for="(item,index) in missionStatusList" :key="index" @click="navToMission(item.status)">
				<view class="img-box">
					<image :src="env.H5_RELATIVE_URL + item.icon" mode="aspectFit"></image>
				</view>
				<view class="name">{{item.name}}</view>
			</view>
		</view>
	</view>
	
	<view>
		<CuButton @click="handleLogout">退出登录</CuButton>
	</view>
	
	<Dialog message="已退出登录" v-model:show="dialogShow" @confirm="logout" />
</template>

<script setup lang="ts">
import CuButton from "@/components/CuButton.vue"
import { ref, reactive, type Ref, onMounted } from "vue";
import Dialog from "@/components/Dialog.vue"
import { router } from "@/router"
import store from "@/store/index.js"
import OptionMenu from "@/components/OptionMenu.vue"
import env from "@/env"

interface IMenu {
	title: string,
	content: string,
	icon: any,
	page: string
}
const dialogShow:Ref<boolean> = ref(false)
const relative_url: Ref<string> = ref("")

const missionStatusList:Ref<any[]> = ref([
	{
		icon: "/static/images/mission_1.png",
		name: "全部",
		status: 6
	},
	{
		icon: "/static/images/mission_2.png",
		name: "进行中",
		status: 2
	},
	{
		icon: "/static/images/mission_4.png",
		name: "已完成",
		status: 5
	},
	{
		icon: "/static/images/mission_3.png",
		name: "已忽略",
		status: 7
	},
])
const mission:IMenu = reactive({
		"title": "我的任务",
		"content": "点击查看我的任务",
		"icon": "/static/images/mission_1.png",
		"page": "/pages/user/mymission"
})
const userInfo = reactive(store.getters.userInfo)
const navToMission = (status:number) => {
	router.push("/pages/user/mymission?status=" + status)
}
const navToUser = () => {
	router.push("/pages/user/user")
}
const handleLogout = () => {
	dialogShow.value = true
}
const logout = () => {
	uni.removeStorageSync("token")
	store.commit("SET_TOKEN", { data: null })
	
	store.dispatch("logout")
	router.replaceAll("/pages/user/login")
}

onMounted(() => {
	relative_url.value = env.H5_RELATIVE_URL
})

</script>

<style lang="stylus" scoped>
.user-main
	display: flex
	align-items: center
	.user-avatar
		width: 130rpx
		height: 130rpx
		margin-right: 12rpx
		border-radius: 65rpx
		overflow: hidden
		background-color #eee
		image
			height: 100%
			width: 100%
		.default-icon
			// width: 100%
			// height: 100%
			font-size: 130rpx
	.user-info
		.user-name
			padding-bottom: 10rpx


.mission-box
	width: 100%
	min-height: 1rem
	background-color: #fff
	border-radius: 12rpx
	box-sizing: border-box
	overflow: hidden
	.title-row
		display: flex
		justify-content: space-between
		align-items: center
		padding 40rpx 40rpx 0
		.title
			font-size: 44rpx
			font-weight: 400
	.img-box
		width: 100%
		height: 60rpx
		margin-bottom: 10rpx
		image
			width: 60rpx
			height: 60rpx
	.name
		font-size: 32rpx
		font-weight: 400
		color: #333
</style>